<!--  -->
<template>
    <div class="main">
      <div class="operationalIndicators">
        <!-- explain -->
        <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42 myIcon" v-popover:explainPopover></i>
          <div class="top">
            <div class="topicon">
              <i class="V7_iconfont V7_iconV7tubiao_huihuazongshu"></i>
            </div>
            <div class="right">
              <p class="text-one">今日会话总数</p>
              <p class="text-two">{{data.initCount || 0}}</p>
            </div>
          </div>
          <div class="bottom">
            <p class="text-three"><span>平均会话时长</span> <span>{{data.avgSessionNotIncludeTimeLen || 0}}</span></p>
            <p class="text-three"><span>平均响应时长</span> <span>{{data.avgMsgResponseLen || 0}}</span></p>
          </div>
        </div>
        <div class="operationalIndicators">
          <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42 myIcon" v-popover:explainPopoverQueue></i>
          <div class="top">
            <div class="topicon orange">
              <i class="V7_iconfont V7_iconV7tubiao_paidui"></i>
            </div>
            <div class="right">
              <p class="text-one">当前排队数</p>
              <p class="text-two">{{data.currentQueueUpCount || 0}}</p>
            </div>
          </div>
          <div class="bottom">
            <p class="text-three"><span>今日排队总数</span> <span class="three-number">{{data.queueUpCount || 0}}</span></p>
            <p class="text-three"><span>排队放弃数</span> <span>{{data.queueGiveUpCount || 0}}</span></p>
            <p class="text-three"><span>实际接入率</span> <span>{{data.queueUpSuccessRate || 0}}</span></p>
            <p class="text-three"><span>平均排队时长</span> <span>{{data.avgQueueUpLen || 0}}</span></p>
          </div>
        </div>
        <div class="operationalIndicators">
          <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42 myIcon" v-popover:explainPopoverAgent></i>
          <div class="top">
            <div class="topicon blue">
              <i class="V7_iconfont V7_iconV7tubiao_zixun"></i>
            </div>
            <div class="right">
              <p class="text-one">当前在线座席</p>
              <p class="text-two">{{zaixianNumber || 0}}</p>
            </div>
          </div>
          <div class="bottom">
            <p v-for="item in stateList" :key="item.name" class="text-three"> <span :title="item.name" class="explainMain-name">{{item.name}}</span> <span>{{item.value}}</span> </p>
            <!-- <p class="text-three"><span>平均会话时长</span> <span>00:00:40</span></p> -->
          </div>
        </div>
        <div class="operationalIndicators">
          <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42 myIcon" v-popover:explainPopoverEvaluate></i>
          <div class="top">
            <div class="topicon green">
              <i class="V7_iconfont V7_iconV7tubiao_canpingshuai"></i>
            </div>
            <div class="right">
              <p class="text-one">参评率</p>
              <p class="text-two">{{data.evaluateRate || 0}}</p>
            </div>
          </div>
          <div class="bottom">
            <p v-for="item in satisfactionList" :key="item.name" class="text-three"> <span :title="item.name" class="explainMain-name">{{item.name}}</span> <span>{{item.value || 0}}</span> </p>
          </div>
          <el-popover
          ref="explainPopover"
          placement="top"
          width="300"
          trigger="hover"
          popper-class="custom-search-pop"
          >
         <div class='explainMain'>
           <p v-for="item in notes.filter(i=>i.group==='huihua')" :key="item.name"><span   style="color:#303753">{{item.name}}: </span><span style="color:#686E84">{{item.note}}</span></p>
         </div>
        </el-popover>
        <el-popover
          ref="explainPopoverQueue"
          placement="top"
          width="300"
          trigger="hover"
          popper-class="custom-search-pop"
          >
         <div class='explainMain'>
           <p v-for="item in notes.filter(i=>i.group==='queue')" :key="item.name"><span style="color:#303753">{{item.name}}: </span><span style="color:#686E84">{{item.note}}</span></p>
         </div>
        </el-popover>
        <el-popover
          ref="explainPopoverAgent"
          placement="top"
          width="300"
          trigger="hover"
          popper-class="custom-search-pop"
          >
         <div class='explainMain'>
           <p v-for="item in notes.filter(i=>i.group==='agent').concat(stateList)" :key="item.name"><span style="color:#303753">{{item.name}}: </span><span style="color:#686E84">{{item.note}}</span></p>
         </div>
        </el-popover>
        <el-popover
          ref="explainPopoverEvaluate"
          placement="top"
          width="300"
          trigger="hover"
          popper-class="custom-search-pop"
          >
         <div class='explainMain'>
           <p v-for="item in notes.filter(i=>i.group==='evaluate').concat(satisfactionList)" :key="item.name"><span style="color:#303753">{{item.name}}: </span><span style="color:#686E84">{{item.note}}</span></p>
         </div>
        </el-popover>
        </div>
    </div>
</template>

<script lang='ts'>
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import { ReportModule } from '@/store/modules/report'
import { commonAction, deepClone } from '@/utils/common'
import { notes } from './notes'
@Component({ name: 'OperationalIndicator' })
export default class extends Vue {
  @Prop({
    default: () => {
      return {}
    }
  }) private data !: any

  // @Watch('data')
  // private getData () {
  //    //
  // }
  get notes () {
    return notes || []
  }

  get satisfactionList () {
    const list: any = []
    const realList = ReportModule.satisfactionList.filter(i => i.isUse)
    for (let i = 0; i < realList.length; i++) {
      const element = realList[i]
      list.push({
        name: element.name + '(占比)',
        value: this.data?.evaluateDataRate?.[element.key],
        note: `今天00:00:00起创建的会话评价为${element.name}的占今日会话总数的比值`
      })
    }
    return list
  }

  get stateList () {
    const list: any = []
    for (let i = 0; i < ReportModule.stateList.length; i++) {
      const element = ReportModule.stateList[i]
      if (element.name === '在线') {
        continue
      }
      list.push({
        name: element.name,
        value: this.data?.agentClaimStatus?.[element._id],
        note: `当前处于“${element.name}”状态的座席数量`
      })
    }
    return list
  }

  get zaixianNumber () {
    return this.data?.agentClaimStatus?.[ReportModule.stateList.find(i => i.name === '在线')?._id] || 0
  }
}
</script>
<style lang='stylus' scoped>
.main
  display flex
  width 100%
  justify-content: space-between;
.operationalIndicators
  width calc((100% - 72px) / 4)
  height 225px
  background #F6F9FC
  border-radius 10px
  position relative
  .top
    // width 245px
    height 90px
    background #FFFFFF
    box-shadow 0px 1px 10px 0px rgba(226, 235, 247, 0.8)
    border-radius 10px 10px 16px 16px
    padding 20px
    overflow hidden
    display flex
    align-items center
    .topicon
      width 50px
      height 50px
      background linear-gradient(90deg, #49ACF3, #1897F1)
      box-shadow 0px 4px 20px 0px #AED2FA
      border-radius 16px
      margin-right 20px
      display flex
      justify-content center
      align-items center
      cursor pointer
      i
        font-size 18px
        color: #FFFFFF
    .text-one
      height: 12px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #767E91;
      line-height 12px
    .text-two
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #303753;
  .bottom
    margin-top 16px
    padding 0 19px
    box-sizing: border-box;
    height: 111px;
    overflow: auto;
  .text-three
    margin-bottom 11px
    font-size: 12px;
    height 12px
    line-height 12px
    font-family: PingFang SC;
    font-weight: 400;
    color: #767E91;
    display flex
    justify-content: space-between;
    & span:last-child
      font-weight: 400;
      color: #303753;
    & span:first-child
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display inline-block
      width 50%
.orange
  background: linear-gradient(90deg, #F7B197, #FE9D7C)!important
  box-shadow: 0px 4px 20px 0px #FADCD4!important
.blue
  background: linear-gradient(90deg, #A5EFFC, #98E0EC)!important
  box-shadow: 0px 4px 20px 0px #C1F1FD!important
.green
  background: linear-gradient(90deg, #7FE398, #2ED47A)!important
  box-shadow: 0px 4px 20px 0px #A8F4BF!important
.myIcon
  font-size 12px
  color #B3B9C7
  position absolute
  top 10px
  right 10px
.explainMain
  padding 14px
  height 210px
  overflow auto
.custom-search-pop
  padding 0
  min-width unset
</style>
